<template>
	<div>
		<div class="avatar-uploader">

			<div v-if="flag">
				<div class="model">
					<div style="display: flex;justify-content:center;height: 100%;align-items: center;width:100px;">
						<div class="icon">
							<el-icon color="#FFFFFF" @click.stop="delteImage()">
								<Delete />
							</el-icon>
							<el-icon color="#FFFFFF" @click.stop="preview()">
								<Plus />
							</el-icon>


						</div>
					</div>
				</div>
				<img :src="getImageUrl" class="avatar">
			</div>

			<el-icon v-else class="el-icon-plus avatar-uploader-icon" @click="data.show=true">
				<Plus />
			</el-icon>
		</div>
		<div style="color:#b4b4b4;">{{msg}}</div>

		<el-dialog title="图片管理器" :model-value="data.show" @close="data.show=false" :destroy-on-close="true"
			custom-class="dia" width="800px" style="margin: 15vh auto;">
			<WMImageManage @onSuccess="success" :multiply="false" />

		</el-dialog>

		<div>

			<el-image-viewer v-if="data.showA" :hideOnClickModal="false" :url-list="[getImageUrl]" :index="2"
				:initial-index="data.initialIndex" @close="co()" />
		</div>


	</div>
</template>

<script>
	import {
		ElMessage
	} from 'element-plus'
	import {
		getEnvs
	} from "/@/utils/envs.js"
	import {
		TOKEN,
		GLOBAL_DATA
	} from '/@/api/constant'
	import {
		getCookieByKey
	} from '/@/utils/cookies'
	import {
		Delete,
		Plus
	} from '@element-plus/icons-vue'
	import WMImageManage from '/@/components/from/WMImageManage.vue'
	import {
		reactive,
		toRef,
		ref,
		computed,
		onMounted,
	} from 'vue';


	export default {
		name: 'UploadImage',
		components: {
			Delete,
			WMImageManage,
			Plus
		},
		props: {
			url: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			select: {
				type: Function,
				default: () => {}
			},
			msg: {
				type: String,
				default: ''
			}
		},
		setup(props, ctx) {
			const data = reactive({
				action: '',
				show: false,
				showA: false,
				initialIndex: 0,

			})
			const getImageUrl = computed(() => {
				return getUrl() + props.url;
			})
			const headers = computed(() => {
				return {
					"Authori-zation": getCookieByKey(TOKEN) || ''
				}
			})

			const flag = computed(() => {
				return props.url ? true : false
			})

			const setUrl = (val) => {
				console.log('???设置url>>>', val)

				ctx.emit('update:url', val)

			}
			const success = (val) => {
				console.log('？？？》》》》》》》》》》选中的', val)


				ctx.emit('update:url', val)

				data.show = false
				ctx.emit('select', val)

			}
			const getUrl = () => {
				const {
					envStr
				} = getEnvs()
				return GLOBAL_DATA[envStr]['image-url'];
			}
			const getBaseUrl = () => {
				const {
					envStr
				} = getEnvs()
				console.log("envStr", envStr);
				// const baseUrlStr = envStr === 'dev' ? import.meta.env.VITE_APP_API_BASE_URL : GLOBAL_DATA[envStr]['baseUrl']
				return GLOBAL_DATA[envStr]['baseUrl']
			}

			const delteImage = () => {
				ctx.emit('update:url', "")
			}
			const preview = () => {
				data.showA = true
			}
			const co = () => {
				data.showA = false
			}

			onMounted(() => {
				data.action = getBaseUrl() + '/upload/image';
				console.log(">>>>>>>>propsurl>>>>", props.url)
			})
			return {
				data,
				getImageUrl,
				delteImage,
				preview,
				co,
				success,
				setUrl,
				flag
			}
		}

	}
</script>
<style scoped>
	.avatar-uploader {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 100px;
		height: 100px;
		display: block;
	}

	.avatar-uploader:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.avatar {
		width: 100px;
		height: 100px;
		display: block;
	}

	.model {
		background-color: #000000;
		width: 100px;
		height: 100px;
		position: absolute;
		opacity: 0;
	}

	.model:hover {
		opacity: 0.6;
	}

	.icon {
		width: 30px;
	}
</style>